<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .active {
            background-color: pink;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- 同时显示多个组件 -->
        <!-- <page-one></page-one>
        <page-two></page-two>
        <page-three></page-three> -->


        <!-- 内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：
            <component v-bind:is="componentName"></component> -->
        <!-- <div>
            <component is="page-one"></component>
            <component is="page-two"></component>
            <component is="page-three"></component>
            <component :is="pageFour"></component>
        </div> -->

        <!-- 对应组件名称显示组件 (组件之前可以进行切换)  -->
        <!-- <div>
            <a :class="{active:conpnentName==='page-one'}" @click="conpnentName='page-one'">pageOne</a> |
            <a :class="{active:conpnentName==='page-two'}" @click="conpnentName='page-two'">pageTwo</a> |
            <a :class="{active:conpnentName==='page-three'}" @click="conpnentName='page-three'">pageThree</a> |
            <a :class="{active:conpnentName===pageFour}" @click="conpnentName=pageFour">pageFour</a> |
        </div>
        <div>
            <component :is="conpnentName"></component>
        </div> -->


        <!-- 在动态组件上使用 keep-alive -->
        <div>
            <a :class="{active:conpnentName==='page-one'}" @click="conpnentName='page-one'">pageOne</a> |
            <a :class="{active:conpnentName==='page-two'}" @click="conpnentName='page-two'">pageTwo</a> |
            <a :class="{active:conpnentName==='page-three'}" @click="conpnentName='page-three'">pageThree</a> |
            <a :class="{active:conpnentName === pageFour}" @click="conpnentName=pageFour">pageFour</a> |
        </div>
        <div>
            <keep-alive>
                <component :is="conpnentName"></component>
            </keep-alive>
        </div>
    </div>
</body>
<template id="pageOne">
    <div class="one">
        <p>{{count}}</p>
        <button @click="count++">点击</button>
    </div>
</template>

<template id="pageTwo">
    <div class="two">
        <p>请输入: <input type="text" v-model="msg"></p>
        <p>msg:{{msg}}</p>
        <button @click="msg=''">点击</button>
    </div>
</template>


<template id="pageThree">
    <div class="three">
        <div>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="sing" id="">sing</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="dance" id="">dance</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="rap" id="">rap</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="basketball" id="">basketball</label>
        </div>
        <div>hobby:{{hobby}}</div>
    </div>
</template>
<template id="pageFour">
    <div class="four">
        <div>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="sing" id="">sing</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="dance" id="">dance</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="rap" id="">rap</label>
            <label><input type="checkbox" v-model="hobby" name="hobby" value="basketball" id="">basketball</label>
        </div>
        <div>hobby:{{hobby}}</div>
    </div>
</template>
<script>

    // 动态组件: 
    // 内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：
    // <component v-bind:is="componentName"></component>

    // componentName  
    // 可以是组件名称(字符串类型) -> 通过data中绑定的数据存储
    // 可以是组件的选项配置(对象数据存到实例的data中)
    // <component v-bind:is="{
    //     data() {
    //         return {
    //             hobby: [],
    //         }
    //     },
    //     template: "#pageThree",
    // }"></component>

    // 默认情况下,在组件切换过程中,如果要切换到下一个组件, 上一个组先会会被销毁(组件被销毁 组件中存储的数据也会被释放),在初始化下一个组件  
    //  => 组件来回切换 数据都会被初始化

    // keep-alive
    // 用一个 <keep-alive> 元素将其动态组件包裹起来。 组件实例能够被在它们第一次被创建的时候缓存下来


    Vue.component("page-one", {
        data() {
            return {
                count: 1
            }
        },
        template: "#pageOne",
        mounted() {
            console.log("组件1被挂载完毕")
        },
        beforeDestroy() {
            console.log("组件1即将被销毁");
        },
    })

    Vue.component("page-two", {
        data() {
            return {
                msg: ""
            }
        },
        template: "#pageTwo",
        mounted() {
            console.log("组件2被挂载完毕")
        },
        beforeDestroy() {
            console.log("组件2即将被销毁");
        },
    })

    Vue.component("page-three", {
        data() {
            return {
                hobby: [],
            }
        },
        template: "#pageThree",
    })

    var pageFour = {
        data() {
            return {
                hobby: [],
            }
        },
        template: "#pageFour",
    }


    var vm = new Vue({
        el: "#app",
        data: {
            pageFour: pageFour,
            conpnentName: "page-one",
        },
    })

</script>

</html>